<template>
  <div class="left">
    <div class="left-tree borderStyle">
      <div class="blueTitleStyle">变电站列表</div>
      <div class="left-content">
        <Tree @handleNodeClick="handleNodeClick" />
      </div>
    </div>
    <div class="left-sbtj borderStyle">
      <div class="blueTitleStyle">设备统计</div>
      <div class="left-content">
        <sbtj ref="sbtj" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Tree from "../Tree/index.vue";
import Sbtj from "../Sbtj/index.vue";

@Component({
  components: { Tree, Sbtj },
})
export default class extends Vue {
  $refs!: {
    sbtj: Sbtj;
  };
  // 树图点击时
  handleNodeClick(item) {
    // console.log(item);
    let sbtj = this.$refs.sbtj;
    let params = {
      id: item.id,
      type: item.type,
    };
    sbtj.videoCount(params);
    this.$emit('handleNodeClick',params)
  }
}
</script>

<style lang="scss" scoped>
.left {
  width: 100%;
  height: 100%;
  .left-content {
    width: 100%;
    height: calc(100% - 0.3rem);
  }
  &-tree {
    width: 100%;
    overflow: auto;
    height: calc(100% - 3rem - 0.1rem);
    margin-bottom: 0.1rem;
  }
  &-sbtj {
    width: 100%;
    height: 3rem;
  }
}
</style>

